<template>
  <div>
    <el-select
      :value="value"
      :placeholder="placeholder"
      :disabled="disabled"
      :multiple="multiple"
      :clearable="clearable"
      :filterable="filterable"
      :collapse-tags="collapseTags"
      style="width: 186px;"
      @change="watchChange"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.name"
        :value="item.phone + '&' + item.name"
      />
    </el-select>
  </div>
</template>
<script>
import { dealerList } from '@/api/dealer'
export default {
  props: {
    value: String,
    disabled: Boolean,
    multiple: Boolean,
    clearable: Boolean,
    placeholder: {
      type: String,
      default: '请选择'
    },
    filterable: Boolean,
    collapseTags: Boolean
  },
  data() {
    return {
      options: []
    }
  },
  mounted() {
    this.dealerList()
  },
  methods: {
    dealerList() {
      dealerList({ pageSize: 9999 }).then((res) => {
        this.options = res.data
      })
    },
    watchChange(value) {
      this.$emit('change', value)
      this.$emit('input', value)
    }
  }
}
</script>
